<template>
  <div>
    <div class="register">
      <div class="header_img"></div>
      <div class="reg_masg">
        <input type="text" placeholder="请输入姓名" v-model="username" />
        <input type="text" placeholder="请输入手机号" v-model="userphone" />
        <input type="password" placeholder="请输入密码" v-model="password" />
        <!-- <input type="text" placeholder="确认密码" v-model="surepassword" /> -->
      </div>
      <div class="registers" @click="register">
        <p>注册</p>
      </div>
      <router-link to="/Landing">
        <div class="logins">
          <p>已有账号去登陆</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { Dialog } from 'vant';
import { post } from "../../utils/request.js";
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

let username = ref('')
let userphone = ref('')
let password = ref('')


let regname = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/
let regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
let regpass = /^[a-zA-Z]\w{5,17}$/



const register = async () => {
  let data = {
    'name': username.value,
    "password": password.value,
    "phone": userphone.value
  }
  if (regname.test(username.value) && regpass.test(password.value) && regPhone.test(userphone.value)) {
    let res
    res = await post('/register', data)
    Dialog.alert({ message: '注册成功' }).then(() => { router.push('/Landing') })
  } else {
    Dialog.alert({ message: '该手机号已注册过' }).then(() => { router.push('/Register') })

  }
}






</script>

<style lang="scss" scoped>
.register {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header_img {
  margin: 1.4rem 0 0.4rem;
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  background-color: pink;
}

.reg_masg {
  width: 2.95rem;
  height: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  input {
    width: 2.95rem;
    height: 0.4rem;
    border: none;
    outline: none;
    font-size: 0.16rem;
    text-indent: 0.2rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;

    &::-webkit-input-placeholder {
      color: #50c7fb;
    }
  }
}

.registers {
  margin: 0.16rem 0;
  width: 2.95rem;
  height: 0.48rem;
  background-color: #0091ff;
  text-align: center;
  line-height: 0.48rem;
  color: white;
  font-size: 0.16rem;
  border-radius: 0.05rem;
}

.logins {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.95rem;
  height: 0.1rem;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.14rem;
}
</style>